<script>

import VisualizationOne from "@/views/VisualizationSet/components/VisualizationOne.vue";
import VisualizationTwo from "@/views/VisualizationSet/components/VisualizationTwo.vue";
import VisualizationThree from "@/views/VisualizationSet/components/VisualizationThree.vue";
import VisualizationFour from "@/views/VisualizationSet/components/VisualizationFour.vue";
import VisualizationFive from "@/views/VisualizationSet/components/VisualizationFive.vue";
import VisualizationSix from "@/views/VisualizationSet/components/VisualizationSix.vue";
import VisualizationSeven from "@/views/VisualizationSet/components/VisualizationSeven.vue";
import VisualizationEight from "@/views/VisualizationSet/components/VisualizationEight.vue";
import VisualizationNine from "@/views/VisualizationSet/components/VisualizationNine.vue";
import VisualizationTen from "@/views/VisualizationSet/components/VisualizationTen.vue";
import VisualizationEleven from "@/views/VisualizationSet/components/VisualizationEleven.vue";
import VisualizationTwelve from "@/views/VisualizationSet/components/VisualizationTwelve.vue";
import VisualizationThirteen from "@/views/VisualizationSet/components/VisualizationThirteen.vue";
import VisualizationFourteen from "@/views/VisualizationSet/components/VisualizationFourteen.vue";
import VisualizationFifteen from "@/views/VisualizationSet/components/VisualizationFifteen.vue";
import VisualizationSixteen from "@/views/VisualizationSet/components/VisualizationSixteen.vue";
import VisualizationSeventeen from "@/views/VisualizationSet/components/VisualizationSeventeen.vue";
import VisualizationEighteen from "@/views/VisualizationSet/components/VisualizationEighteen.vue";
import VisualizationNineteen from "@/views/VisualizationSet/components/VisualizationNineteen.vue";
import VisualizationTwenty from "@/views/VisualizationSet/components/VisualizationTwenty.vue";
import VisualizationTwentyOne from "@/views/VisualizationSet/components/VisualizationTwentyOne.vue";
import VisualizationTwentyTwo from "@/views/VisualizationSet/components/VisualizationTwentyTwo.vue";
import VisualizationTwentyThree from "@/views/VisualizationSet/components/VisualizationTwentyThree.vue";
import VisualizationTwentyFour from "@/views/VisualizationSet/components/VisualizationTwentyFour.vue";
import VisualizationTwentyFive from "@/views/VisualizationSet/components/VisualizationTwentyFive.vue";
import VisualizationTwentySix from "@/views/VisualizationSet/components/VisualizationTwentySix.vue";
import VisualizationTwentySeven from "@/views/VisualizationSet/components/VisualizationTwentySeven.vue";
import VisualizationTwentyEight from "@/views/VisualizationSet/components/VisualizationTwentyEight.vue";

  export default {
    name: 'VisualizationSet',
    components: {
      "VisualizationOne": VisualizationOne,
      "VisualizationTwo": VisualizationTwo,
      "VisualizationThree": VisualizationThree,
      "VisualizationFour": VisualizationFour,
      "VisualizationFive": VisualizationFive,
      "VisualizationSix": VisualizationSix,
      "VisualizationSeven": VisualizationSeven,
      "VisualizationEight": VisualizationEight,
      "VisualizationNine": VisualizationNine,
      "VisualizationTen": VisualizationTen,
      "VisualizationEleven": VisualizationEleven,
      "VisualizationTwelve": VisualizationTwelve,
      "VisualizationThirteen": VisualizationThirteen,
      "VisualizationFourteen": VisualizationFourteen,
      "VisualizationFifteen": VisualizationFifteen,
      "VisualizationSixteen": VisualizationSixteen,
      "VisualizationSeventeen": VisualizationSeventeen,
      "VisualizationEighteen": VisualizationEighteen,
      "VisualizationNineteen": VisualizationNineteen,
      "VisualizationTwenty": VisualizationTwenty,
      "VisualizationTwentyOne": VisualizationTwentyOne,
      "VisualizationTwentyTwo": VisualizationTwentyTwo,
      "VisualizationTwentyThree": VisualizationTwentyThree,
      "VisualizationTwentyFour": VisualizationTwentyFour,
      "VisualizationTwentyFive": VisualizationTwentyFive,
      "VisualizationTwentySix": VisualizationTwentySix,
      "VisualizationTwentySeven": VisualizationTwentySeven,
      "VisualizationTwentyEight": VisualizationTwentyEight,
    }
  }
</script>

<template>
<div id="vis-box">
  <div class="box-top">
    <div class="box-div1">
      <VisualizationOne></VisualizationOne>
    </div>
    <div class="box-div2">
      <VisualizationTwo></VisualizationTwo>
    </div>
  </div>
  <div class="box-center-one">
    <div class="box-div1">
      <VisualizationThree></VisualizationThree>
    </div>
    <div class="box-div2">
      <VisualizationFour></VisualizationFour>
    </div>
  </div>
  <div class="box-center-two">
    <div class="box-div1">
      <VisualizationFive></VisualizationFive>
    </div>
    <div class="box-div2">
      <VisualizationSix></VisualizationSix>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationSeven></VisualizationSeven>
    </div>
    <div class="box-div2">
      <VisualizationEight></VisualizationEight>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationNine></VisualizationNine>
    </div>
    <div class="box-div2">
      <VisualizationTen></VisualizationTen>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationEleven></VisualizationEleven>
    </div>
    <div class="box-div2">
      <VisualizationTwelve></VisualizationTwelve>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationThirteen></VisualizationThirteen>
    </div>
    <div class="box-div2">
      <VisualizationFourteen></VisualizationFourteen>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationFifteen></VisualizationFifteen>
    </div>
    <div class="box-div2">
      <VisualizationSixteen></VisualizationSixteen>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationSeventeen></VisualizationSeventeen>
    </div>
    <div class="box-div2">
      <VisualizationEighteen></VisualizationEighteen>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationNineteen></VisualizationNineteen>
    </div>
    <div class="box-div2">
      <VisualizationTwenty></VisualizationTwenty>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationTwentyOne></VisualizationTwentyOne>
    </div>
    <div class="box-div2">
      <VisualizationTwentyTwo></VisualizationTwentyTwo>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationTwentyThree></VisualizationTwentyThree>
    </div>
    <div class="box-div2">
      <VisualizationTwentyFour></VisualizationTwentyFour>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationTwentyFive></VisualizationTwentyFive>
    </div>
    <div class="box-div2">
      <VisualizationTwentySix></VisualizationTwentySix>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationTwentySeven></VisualizationTwentySeven>
    </div>
    <div class="box-div2">
      <VisualizationTwentyEight></VisualizationTwentyEight>
    </div>
  </div>
</div>
</template>

<style scoped>
@import "css/VisualizationSet.css";
</style>